<template>
  <!-- 老虎机-Slots详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData"
    :title="selectToLabel(indexStore.gameArray, props.checkedItem.game_id)" width="60%" top="8vh"
    :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" @close="onHideDetails">
    <div v-loading="indexStore.moduleLoading" class="border-box">
      <template v-for="(item, index) in data.filArr" :key="index">
        <div class="flex list">
          <div class="width20">
            <span v-if="item.key != 'game_board'">{{ item.label }}</span>
            <span v-else>
              {{ item.label }}
              <span class="colorRed marginL2" v-show="data.listDetails.length">({{
                (data.gameIndex + 1) + '/' + data.listDetails.length }})</span>
            </span>
          </div>
          <div style="position: relative">
            <span v-if="item.key == 'game_id'">
              <GameHeaderInfo class="marginB5" :game_id="props.checkedItem.game_id" />
            </span>
            <span
              v-else-if="item.key == 'win_lose' || item.key == 'bet' || item.key == 'win' || item.key == 'enter_money' || item.key == 'after_settlement_money'"
              :class="colorClass(item.value)">{{ BigWan(item.value) }}</span>
            <div v-else-if="item.key == 'game_board' && item.value">
              <iframe class="marginT5" :src="item.value" width="480px" height="750px" allow-popups
                style="border: 1px solid #ededed;" />
              <div v-show="(data.listDetails.length && data.gameIndex != 0) ? true : false" class="slide leftSlide"
                @click="checkLeft">
                <img :src="Left" alt="">
              </div>
              <div v-show="(data.listDetails.length && data.gameIndex != data.listDetails.length - 1) ? true : false"
                class="slide rightSlide" @click="checkRight">
                <img :src="Right" alt="">
              </div>
            </div>
            <span v-else>{{ item.value }}</span>
          </div>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus } from '@/utils/math'
import { throttle, selectToLabel, colorClass } from '@/utils/index'
import { getGameDetails, getGameMiniReport } from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import Left from "@/assets/images/icon/left.png"
import Right from "@/assets/images/icon/right.png"

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
  listDetails: [] as any[],
  gameIndex: 0,
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0] && value[1]) {
      data.gameIndex = 0
      gameDetails(props.checkedItem)
      gameRecordDetails()
    }
  },
)

// 详情
const gameDetails = async (row: any) => {
  indexStore.setModuleLoading(true)
  let dataRes = await getGameDetails({
    uuid: row.uuid_str,
    uid: row.uid,
    agent_id: row.agent_id,
  })
  let res = JSON.parse(dataRes.data.log_json)
  console.log('老虎机详情' + '(' + dataRes.data.round_id_str + ')', res);
  data.filArr = [
    { label: '游戏', value: selectToLabel(indexStore.gameArray, dataRes.data.game_id), key: 'game_id' },
    { label: '牌局编号', value: dataRes.data.round_id_str, key: 'round_id_str' },
    { label: '时间', value: setTimestampTime(dataRes.data.save_time_stamp), key: 'created_time_stamp' },
    { label: '当前盘面', value: dataRes.data.game_board, key: 'game_board' },
    { label: '下注前', value: dataRes.data.enter_money, key: 'enter_money' },
    { label: '结算后', value: dataRes.data.after_settlement_money, key: 'after_settlement_money' },
    { label: '下注金额', value: dataRes.data.bet, key: 'bet' },
    { label: '玩家输赢', value: BigMinus(dataRes.data.win, dataRes.data.bet), key: 'win_lose' },
    { label: '玩家总赢', value: dataRes.data.win, key: 'win' },
    // { label: 'icon上每条线赢取的金额', value: res.lw?res.lw:res.sw, key: 'lw' },
  ]
}

// 游戏特殊玩法(连消+小游戏)
const gameRecordDetails = async () => {
  data.gameIndex = 0
  data.listDetails = []
  if (props.checkedItem.small_game_type) {
    indexStore.setModuleLoading(true)
    let res = await getGameMiniReport({
      round_id: props.checkedItem.round_id_str ? props.checkedItem.round_id_str : props.checkedItem.parent_id_str,
      uid: props.checkedItem.uid,
      agent_id: props.checkedItem.agent_id,
    })
    data.listDetails = res.data.list
    data.listDetails.forEach((item: any, index: number) => {
      if (props.checkedItem.round_id_str == item.round_id_str) {
        data.gameIndex = index
      }
    })
  }
}

// 查看牌局游戏详情
const checkLeft = throttle(() => {
  if (!data.gameIndex) return
  data.gameIndex = data.gameIndex - 1
  gameDetails(data.listDetails[data.gameIndex])
},1000)

const checkRight = throttle(() => {
  if (data.gameIndex == data.listDetails.length - 1) return
  data.gameIndex = data.gameIndex + 1
  gameDetails(data.listDetails[data.gameIndex])
},1000)

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  data.filArr = [
    { label: '游戏', value: '', key: 'game_id' },
    { label: '牌局编号', value: '', key: 'round_id_str' },
    { label: '时间', value: 0, key: 'created_time_stamp' },
    { label: '当前盘面', value: '', key: 'game_board' },
    { label: '下注前', value: 0, key: 'enter_money' },
    { label: '结算后', value: 0, key: 'after_settlement_money' },
    { label: '下注金额', value: 0, key: 'bet' },
    { label: '玩家输赢', value: 0, key: 'win_lose' },
    { label: '玩家总赢', value: 0, key: 'win' },
    { label: 'icon上每条线赢取的金额', value: '', key: 'lw' },
  ]
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.slide {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}

.rightSlide {
  position: absolute;
  right: -12%;
  top: 42%;
}

.leftSlide {
  position: absolute;
  left: -12%;
  top: 42%;
}
</style>